<template>
  <div class="alarmConfiguration zy-content">
    <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="exportTemplateClick">导出</Button>
        <!-- <Button @click="addRecords"
          >报工补录</Button
        > -->
        <Button v-has="'bgblCode'" @click="addRecords">报工补录</Button>
        <Button v-has="'Revokeworkapplication'" @click="revoke">撤销报工</Button>
        <Button v-has="'labelprinting'" @click="showForm({}, 'new')">标签打印</Button>
        <Button v-has="'reprinting'" @click="showForm({}, 'reprinting')">标签补印</Button>
      </div>
      <div class="tableContent">
        <Table
            class="resizable-table"
            border
            @on-column-width-resize="onColumnWidthResize"
            :columns="columnsList"
            ellipsis
            ref="selection"
            stripe
            :data="dataArr"
            @on-selection-change="onSelectChange"
        >
          <template slot-scope="{ row }" slot="batchNumber">
						<span class="row_click" @click="showRowDetail(row)">
							{{ row.batchNumber }}
						</span>
          </template>
          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="showCodeDetail(row)"><i class="iconfont zy-common-bianji"></i>件码查看</span>
            <span class="operationBtn" @click="showReportingDetail(row)"><i
                class="iconfont zy-common-bianji"></i>标签详情</span>
          </template>
          <template slot-scope="{ row }" slot="numberOfPieces">
            <span class="row_click" @click="showNumberOfPieces(row.itemCodebyList)">{{ row.numberOfPieces }}</span>
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="delIds.length"/>
        <Page
            :total="total"
            :page-size="pageSize"
            :page-size-opts="pageSizeOption"
            :current="pageNum"
            @on-change="changePageNum"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total
        />
      </div>
    </div>
    <inputModal ref="inputModal"></inputModal>
    <Modal :mask-closable="false" v-model="showDetailDialog" title="批次属性" class="modal-content-layout" width="55%">
      <div class="alarmConfiguration">
        <div class="list-layout2">
          <div class="tableContent mt14">
            <Table
                class="resizable-table"
                border
                @on-column-width-resize="onColumnWidthResize"
                :columns="columns2"
                ellipsis
                ref="selection"
                stripe
                :data="dataArr2"
                @on-selection-change="onSelectChange2"
            ></Table>
          </div>
        </div>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="showJmDialog" title="件码明细" class="modal-content-layout" width="55%">
      <div class="alarmConfiguration">
        <div class="list-layout2">
          <div class="tableContent mt14">
            <Table class="resizable-table" border :columns="columns3" ellipsis stripe :data="dataArr3"></Table>
          </div>
        </div>
      </div>
    </Modal>
    <ledger-print-modal @hasPrint="hasPrint" ref="ledgerPrintModal"/>
    <addModel @refresh="searchList" ref="addModel" @print="print"></addModel>
    <addRepoModal ref="addRepoModal" @print="print"></addRepoModal>
    <boxCodeDetail ref="boxCodeDetail"></boxCodeDetail>
  </div>
</template>

<script>
import search from '@/components/curd/searchList.vue';
import inputModal from '@/components/modalTypes/inputModal.vue';
import toggleTableOperation from '@/mixins/toggleTableOperation';
import ledgerPrintModal from '../labelPrinting/modules/ledgerPrintModal';
import addModel from '../labelPrinting/modules/addMode';
import fileDownload from 'js-file-download';
import addRepoModal from './addModal';
import boxCodeDetail from './boxCodeDetail.vue';

export default {
  name: 'productionReportingRecords',
  components: {
    search,
    inputModal,
    ledgerPrintModal,
    addModel,
    addRepoModal,
    boxCodeDetail,
  },
  mixins: [toggleTableOperation],
  data() {
    return {
      showJmDialog: false,
      type: '',
      showDetailDialog: false,
      formItem: {},
      allCheck: false,
      loading: false,
      create: false,
      searchParams: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,

      pageNum2: 1,
      pageSize2: 10,
      total2: 0,

      searchData: [
        {
          title: '订单号',
          key: 'orderCode',
        },
        {
          title: '工单号',
          key: 'workCode',
        },
        {
          title: '批次号',
          key: 'batchNumber',
        },
        {
          title: '产品编号',
          key: 'materialCode',
        },
        {
          title: '产品名称',
          key: 'materialName',
        },
        {
          title: '产品型号',
          key: 'materialModel',
        },
        {
          title: '车间',
          key: 'functionalLocation',
          type: 'cascader',
          dicUrl: '/basic/organization/findListByToken?level=0',
          params: {
            label: 'name',
            value: 'code',
            children: 'children',
          },
        },
        {
          title: '设备编号',
          key: 'deviceNo',
        },
        {
          title: '卷号',
          key: 'rollNumber',
        },

        {
          title: '工序',
          key: 'productionProcesses',
        },

        {
          title: '生产时间',
          key: 'time',
          type: 'daterange',
        },
        {
          title: '图号规格',
          key: 'customMaterialCode',
        },
        {
          title: '材料牌号',
          key: 'productGrade',
        },
        {
          title: '产品牌号',
          key: 'materialMark',
        },
        {
          title: '提报人',
          key: 'reportingOperator',
        },
        {
          title: '操作工',
          key: 'operator',
          dicUrl: '/basic/user/searchUser',
          type: 'search',
          queryName: 'key',
          resultParams: 'res.data',
          params: {
            label: 'realname',
            value: 'realname',
          },
        },
        {
          title: '报工时间',
          key: 'time2',
          span: 8,
          type: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
        },
        {
          title: '箱码',
          key: 'boxCode',
        },
        {
          title: '件码',
          key: 'itemCode',
        },
      ],
      columns: [
        {
          key: 'selection',
          type: 'selection',
          width: 60,
          align: 'center',
        },
        {
          title: '报工单号',
          key: 'id',
          minWidth: 130,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '订单号',
          key: 'orderCode',
          minWidth: 130,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '工单号',
          key: 'workCode',
          minWidth: 130,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '批次号',
          key: 'batchNumber',
          slot: 'batchNumber',
          minWidth: 130,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '生产场地',
          key: 'functionalLocationName',
          minWidth: 130,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '设备编号',
          key: 'deviceNo',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '模具编号',
          key: 'moldCode',
          minWidth: 130,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '产品编号',
          key: 'materialCode',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '物料组',
          key: 'materialGroup',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '物料组描述',
          key: 'materialGroupDescribe',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '产品型号',
          key: 'materialModel',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '产品名称',
          key: 'materialName',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '产品重量',
          key: 'weight',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '产品重量单位',
          key: 'weightUnit',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '产品牌号',
          key: 'materialMark',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '生产时间',
          key: 'shiftTime',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '生产班次',
          key: 'shift',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '工序',
          key: 'productionProcesses',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '提报方式',
          key: 'reportingMethod',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        // {
        //   title: "提报重量/数量",
        //   key: "reportingWeight",
        //   minWidth: 180,
        //   align: "center",
        //   resizable: true,
        //   tooltip: true,
        // },
        {
          title: '图号规格',
          key: 'customMaterialCode',
          minWidth: 100,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '材料牌号',
          key: 'productGrade',
          minWidth: 100,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '开料牌号',
          key: 'cuttingGrade',
          minWidth: 100,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '提报单位',
          key: 'reportingWeightUnits',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '提报数量',
          key: 'reportedQuantity',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '打印余量',
          key: 'labelRemainingQuantity',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '状态',
          key: 'status',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '卷号',
          key: 'rollNumber',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '料位',
          key: 'materialLevel',
          minWidth: 150,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '箱码',
          key: 'boxCode',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '件码',
          key: 'numberOfPieces',
          slot: 'numberOfPieces',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '撤销原因',
          key: 'reasonForRevocation',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '提报人',
          key: 'reportingOperator',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '操作工',
          key: 'operator',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '操作工编号',
          key: 'operatorEmployee',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '报工时间',
          key: 'reportingTime',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '撤销人',
          key: 'revocationBy',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '撤销时间',
          key: 'revocationTime',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '备注',
          key: 'remarks',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '入库凭证',
          key: 'mblnr',
          minWidth: 180,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: 'action',
          fixed: 'right',
          minWidth: 230,
          align: 'center',
        },
      ],
      columns3: [
        {
          title: '件码信息',
          key: 'itemCode',
          align: 'center',
        },
      ],
      columns2: [
        {
          title: '序号',
          key: 'index',
          type: 'index',
          width: 100,
          align: 'center',
        },
        {
          title: '批次属性',
          key: 'name',
          minWidth: 200,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
        {
          title: '属性内容',
          key: 'value',
          minWidth: 200,
          align: 'center',
          resizable: true,
          tooltip: true,
        },
      ],
      dataArr: [],
      dataArr2: [],
      dataArr3: [],
      pageSizeOption: [10, 20, 30, 40],
      delIds: [],
      selection: [],
    };
  },
  created() {
    this.getTableColumnsWidth(this.columns);
  },
  activated() {
    this.searchList();
  },
  beforeRouteLeave(to, from, next) {
    if (to.name == 'reportingDetail') {
      from.meta.keepAlive = true;
    } else {
      from.meta.keepAlive = false;
    }
    next();
  },
  // mounted() {
  // 	// this.handleContextMenuToggle();
  // 	this.getTableColumnsWidth(this.columns);
  // },
  methods: {
    showRowDetail(row) {
      this.dataArr2 = [
        {
          name: '班次',
          value: row.shift || '--',
        },
        {
          name: '工作中心',
          value: row.workShop || '--',
        },
        {
          name: '工序',
          value: row.productionProcesses || '--',
        },
        {
          name: '卷号',
          value: row.rollNumber || '--',
        },
        {
          name: '材料牌号',
          value: row.productGrade || '--',
        },
      ];
      this.showDetailDialog = true;
    },
    showNumberOfPieces(data) {
      this.dataArr3 = data;
      this.showJmDialog = true;
    },
    showReportingDetail(row) {
      this.$router.push({
        path: '/productManage/productionReportingRecords/detail',
        query: {
          // status: "add",
          id: row.id,
        },
      });
    },
    revoke() {
      if (this.delIds.length !== 1) {
        this.$Message.warning('请选择需要撤销报工的数据');
        return;
      }
      this.$refs.inputModal.showModal({
        title: '撤销报工',
        desc: '撤销报工原因',
        submit: (form) => {
          const data = this.delIds.map((item) => {
            return {
              reasonForRevocation: form.value,
              id: item.id,
              workCode: item.workCode,
              rueck: item.rueck,
              rmzhl: item.rmzhl,
            };
          })[0];
          this.axios({
            method: 'post',
            url: '/dms/mobile/revokeReporting',
            data,
          }).then((res) => {
            if (res.code === 200) {
              this.$Message.success(res.msg);
              this.searchList();
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          });
        },
      });
    },
    showCodeDetail(row) {
      this.$refs.boxCodeDetail.show(row.id);
    },
    getSearch(arg) {
      this.searchParams = JSON.parse(JSON.stringify(arg[0]));
      if (this.searchParams.time && this.searchParams.time.length > 0) {
        this.searchParams.startTime = this.searchParams.time[0];
        this.searchParams.endTime = this.searchParams.time[1];
        delete this.searchParams.time;
      }
      if (this.searchParams.time2 && this.searchParams.time2.length > 0) {
        this.searchParams.reportingStartTime = this.searchParams.time2[0];
        this.searchParams.reportingEndTime = this.searchParams.time2[1];
        delete this.searchParams.time2;
      }
      if (this.searchParams.functionalLocation && this.searchParams.functionalLocation.length > 0) {
        this.searchParams.functionalLocation = [this.searchParams.functionalLocation.at(-1)];
      }
      this.pageNum = 1;
      this.searchList();
    },
    reset() {
      this.searchParams = {};
      this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },

    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    //查询列表
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams,
      };
      this.axios({
        method: 'post',
        url: '/dms/pRoductionReporting/getPRoductionReportingList',
        data: params,
      }).then((res) => {
        if (res.code === 200) {
          this.dataArr = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //勾选列表
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item) => {
        myArray.push(item);
      });
      this.delIds = myArray;
      if (selection.length > 0) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    addRecords() {
      this.$refs.addRepoModal.show();
    },
    hasPrint() {
      let formItem = JSON.parse(JSON.stringify(this.$refs.addModel.formItem));
      delete formItem.itemCodebyList;
      formItem['reportingId'] = formItem.id;
      delete formItem.id;
      formItem.tagSerialNumber = this.$refs.ledgerPrintModal.timeValueList.join(',');
      for (let key in formItem) {
        if (formItem[key] == null || formItem[key] == undefined) {
          delete formItem[key];
        }
      }
      this.$refs.ledgerPrintModal.printLoading = true;
      let url = '';
      if (this.type == 'new') {
        url = '/dms/labelPrinting/addLabelPrinting';
      } else if (this.type == 'edit') {
        url = '/dms/labelPrinting/updateLabelPrinting';
      } else if (this.type == 'reprinting') {
        url = '/dms/labelPrinting/reprintLabelPrinting';
      }
      this.axios({
        url,
        method: 'post',
        data: {
          ...formItem,
        },
      }).then((res) => {
        this.$refs.ledgerPrintModal.printLoading = false;
        if (res.code == 200) {
          this.$refs.ledgerPrintModal.getPrintDevice();
          this.$refs.ledgerPrintModal.close();

          this.$refs.addModel.close();
          this.searchList();
          this.searchList2();
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    showForm(row, type) {
      if (this.delIds.length !== 1) {
        this.$Message.warning('请选择需要打印的数据');
        return;
      }
      if (this.delIds[0].status == '已撤回') {
        this.$Message.warning('已撤回状态无法打印');
        return;
      }
      this.type = type;
      const data = {
        ...this.delIds[0],
        cla: this.delIds[0].shift,
      };
      this.$refs.addModel.show({...data, deviceCode: this.delIds[0].deviceNo}, type == 'reprinting' ? 'new' : type);
    },
    print(formItem) {
      const data = {
        ...formItem,
        volumeNumber: formItem.rollNumber,
        materialWidth: formItem.materialWid,
        deviceCode: formItem.deviceNo,
      };
      this.$refs.ledgerPrintModal.show(data, formItem.labelType);
    },
    exportTemplateClick() {
      let params = {};
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      const filName = '生产报工记录';
      this.axios({
        url: '/dms/pRoductionReporting/export',
        data: params,
        method: 'post',
      }).then((res) => {
        if (res.code == 555) {
          this.$Message.error(res.msg);
        } else {
          this.axios({
            url: '/dms/pRoductionReporting/export',
            data: params,
            responseType: 'blob',
            method: 'post',
          }).then((res) => {
            fileDownload(res, filName + '.xlsx');
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.ivu-input-number {
  width: -webkit-fill-available;
}

.row_click {
  cursor: pointer;
  color: rgb(50, 113, 240) !important;
}
</style>
